<template>
  <div class="flex item-center p-10px box-border rounded bg-light-50">
    <div class="flex flex-col items-center">
      <div class="image~ w-100px h-100px rounded-1/2"
           :style="{backgroundImage: `url(http://127.0.0.1:8081/static/${avatar})`}"></div>
      <div class="flex mt-10px text-sm">
        <div class="mr-10px">昵称:</div>
        <div>{{ nicknameFilter }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, computed} from 'vue'

export default defineComponent({
  name: "UserInfoBoard",
  props: {
    avatar: {
      type: String,
      required: true
    },
    nickname: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const nicknameFilter = computed(() => {
      return props.nickname || "---"
    })

    return {
      nicknameFilter
    }
  }
})
</script>

<style scoped>

</style>